<!-- 待办页面 -->
<template>
  <f7-page id="backlog" @page:beforein="getData" ptr @ptr:refresh="getData">
    <f7-navbar title="待办事项" back-link></f7-navbar>
    <f7-toolbar tabbar color="white">
      <f7-link tab-link text-color="red" :tab-link-active="activetab === 0" v-if="user.role.find(item => item.id === 1)" text="待转办" @click="checktab(0, '待转办')"></f7-link>
      <f7-link tab-link text-color="red" :tab-link-active="activetab === 1" v-if="user.role.find(item => item.id === 2)" text="已转办(省)" @click="checktab(1, '已转办(省)')"></f7-link>
      <f7-link tab-link text-color="red" :tab-link-active="activetab === 2" v-if="user.role.find(item => item.id === 4)" text="待处理" @click="checktab(2, '待处理')"></f7-link>
      <f7-link tab-link text-color="red" :tab-link-active="activetab === 3" text="已处理" @click="checktab(3, '已处理')"></f7-link>
    </f7-toolbar>
    <f7-searchbar placeholder="输入搜索" :clear-button="true" search-container=".search-list" search-in=".item-title, .item-after, .item-subtitle, .item-text" style="border-top: 1px solid #ccc;"></f7-searchbar>
    <f7-list media-list bg-color="white" class="no-margin search-list searchbar-found">
      <div v-if="viewlist.length === 0" class="text-align-center text-color-gray no-data-div">暂无{{textname}}记录</div>
      <f7-list-item v-for="v in viewlist" :key="v.id" link="#" :after="textname" @click="getoview(v)">
        <div slot="title" v-text="(v.cityname || '') + (v.townname || '') + (v.villagename || '')"></div>
        <div slot="subtitle">督查员：{{v.inspectorname}} &nbsp; {{v.time ? `创建时间：${format(v.time)}` : ''}}</div>
        <div slot="text">{{gettime(v)}}</div>
      </f7-list-item>
    </f7-list>
    <f7-list class="searchbar-not-found">
      <f7-list-item title="未找到任何记录"></f7-list-item>
    </f7-list>
  </f7-page>
</template>
<script>
import { f7Page, f7Navbar, f7Toolbar, f7Link, f7Searchbar, f7List, f7ListItem, f7Popover } from 'framework7-vue'
import { mapState } from 'vuex'
import formatdate from 'utils/formatdate'
export default {
  components: {
    f7Page,
    f7Navbar,
    f7Toolbar,
    f7Link,
    f7Searchbar,
    f7List,
    f7ListItem,
    f7Popover
  },
  computed: {
    ...mapState({
      user: state => state.user
    })
  },
  data() {
    return {
      activetab: 0,
      textname: '待转办',
      viewlist: []
    }
  },
  created() {
    if (this.user.role.find(item => item.id === 1)) {
      this.activetab = 0
      this.textname = '待转办'
    } else if (this.user.role.find(item => item.id === 2)) {
      this.activetab = 1
      this.textname = '已转办(省)'
    } else {
      this.activetab = 2
      this.textname = '待处理'
    }
    const city = this.user.place.filter(item => item.level === 1)
    this.cityid = []
    this.roleid = []
    city.forEach(item => {
      this.cityid.push(item.id)
    })
    this.user.role.forEach(item => {
      this.roleid.push(item.id)
    })
  },
  methods: {
    // goadd(page) {
    //   this.$f7.preloader.show()
    //   $f7.views.main.router.navigate(page)
    // },
    getoview(v) {
      const context = {
        textname: this.textname + '问题清单',
        id: v.id,
        type: 3,
        status: v.state,
        edit: false,
        page: 'backlog'
      }
      this.$f7.preloader.show()
      this.$f7.views.main.router.navigate('/view', { context })
    },
    checktab(index, name) {
      if (this.activetab === index) return
      this.activetab = index
      this.textname = name
      this.getData()
    },
    async getData(e, done) {
      const list = await this.request('/backlogview', { state: this.activetab, cityid: this.cityid.join(','), roleid: this.roleid.join(','), userid: this.user.id })
      if (list.code === 0) {
        this.viewlist = []
      } else {
        this.viewlist = list.data
      }
      (typeof done === 'function') && done()
    },
    format(time, t) {
      return formatdate(new Date(time), t ? 'yyyy-MM-dd hh:mm' : 'yyyy-MM-dd')
    },
    gettime(v) {
      if (v.state === 6) {
        return `处理时间：${this.format(v.btime, 1)}`
      }
      if (v.state === 5) {
        return `转办(县)时间：${this.format(v.btime, 1)}`
      }
      if (v.state === 4) {
        return `转办(省)时间：${this.format(v.btime, 1)}`
      }
      if (v.state === 3) {
        return `提交时间：${this.format(v.btime, 1)}`
      }
    }
  }
}
</script>